<template>
	<!-- 投票 -->
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center talk_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub talk_fd0_0'>
					<view class='flex flex-wrap align-center talk_fd0_0_c0'>
						<text class='fu-iconfont2  talk_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='talk_fd0_0_c1_c0'>投票 </text>
					</view>
					<view class='flex flex-wrap align-center justify-end talk_fd0_0_c0'>
					</view>
				</view>
			</view>

			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<view class="gesture-container">
				<view class="question-outer">
					<text class="title">{{info.vote_title }}</text>
					<view class="time"> 发布时间：{{info.create_time }}</view>
				</view>
				<view class="change-outer">
					<view class="name">
						参与投票
					</view>
					<view class="num">
						{{num }}人已参与
					</view>
					<view class="select-item" v-for="item in info.options">
						<view class="item-name">
							{{item.value}}
						</view>
						<view
							style="display: flex; align-items: center; justify-content: space-between;margin-top: 16rpx;">
							<view class='flex benben-progress-bar MyPortrayal_fd1_7_c1_c0_c1_c0'>
								<view class='benben-progress-bar-center MyPortrayal_progress1_fd1_7_c1_c0_c1_c0'
									:style="{width: selectId==item.id ? '100%' : '0%'}">
								</view>
							</view>
							<view @click.stop="selectItem(item.id)" v-if="selectId !==item.id" class="yuan"></view>
							<image v-else style="width: 40rpx;height: 40rpx;" src="@/static/sign/dui.png" mode="">
							</image>
						</view>
					</view>
				</view>

			</view>

			<view :class="selectId?'':'classhourPar_flex_6_other'"
				class="flex benben-position-layout flex flex-wrap align-center classhourPar_flex_6"
				:style="{height:(148+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx', }">
				<button class='classhourPar_fd6_0' @click.stop="goNext">投票</button>
			</view>
			<view :style="{height: (148+bottomSafeAreaRpx)+'rpx'}"></view>
		</view>
	</page-body>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		data() {
			return {
				votequestion_id: "",//投票信息id
				info: "",
				num: "",
				selectId: "",
				aid:'',//通知文章id
				isup:false
			}
		},
		// 小程序页面生命周期，如果是 uni-app 可以写
		onLoad(options) {
			this.votequestion_id = options.votequestion_id
			this.aid = options.aid
			this.getList()
		},
		onShow() {
			
		},
		computed: {
			// 计算属性
		},
		watch: {
			// 监听器
		},
		methods: {
			selectItem(val) {
				this.selectId = val
			},
			async getList() {
				let res = await this.$api.post(global.apiUrls.post68b56cc9c2ac1, {
					aid: this.votequestion_id
				});

				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				this.info = res.data.data.info
				this.num = res.data.data.num
				console.log('22222222222222222', res);
			},
			async red() {
				let res = await this.$api.post(global.apiUrls.post68413be3159e9, {
					aid: this.aid
				});
			
			
			},
			async goNext(val) {
				// uni.redirectTo({
				// 	url: `/pages/kc/tpjg/tpjg?aid=1&type=1`
				// 	// url: `/pages/course/voteResult/voteResult?aid=${res.data.data.aid}`
				// })
				// return
				if (!this.selectId) return
				if(this.isup){
					return
				}
				this.isup=true
				let res = await this.$api.post(global.apiUrls.post68b66909a21e2, {
					activitieslog_id: this.aid,
					vote_option: this.selectId
				});
				// this.red()
				if (res.data.code != 1) {
					this.isup=false
					this.$message.info(res.data.msg);
					return
				}
				uni.redirectTo({
					url: `/pages/activity/tpjg/tpjg?aid=${this.aid}&type=1`
				})
			}
		},

		onReady() {},

		onHide() {},
		onUnload() {},
	}
</script>
<style lang="scss" scoped>
	.yuan {
		width: 40rpx;
		height: 40rpx;
		background: #FFFFFF;
		border: 2rpx solid #E4E4E8;
		border-radius: 40rpx;
	}

	.MyPortrayal_fd1_7_c1_c0_c1_c0 {
		background: #EEF1F9;
		width: 584rpx;
		height: 28rpx;
		border-radius: 14rpx;
		background-size: 100% auto;

		.MyPortrayal_progress1_fd1_7_c1_c0_c1_c0 {
			background: linear-gradient(90deg, #1D54F7 0%, #17A4FC 100%);
			border-radius: 14rpx;
		}


	}

	.classhourPar_flex_6 {
		width: 750rpx;
		height: 148rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background-color: #fff;
	}

	.classhourPar_flex_6_other {
		opacity: 0.5;
	}

	.classhourPar_fd6_0 {
		width: 100%;
		width: 702rpx;
		height: 84rpx;
		background: #145EFD;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		color: #fff;
		font-weight: 500;
		font-size: 36rpx;
		margin: 32rpx auto;
	}

	.gesture-container {

		.question-outer {
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 32rpx 24rpx;
			margin: 24rpx 24rpx 0;

			.title {
				font-weight: 500;
				font-size: 40rpx;
				color: #090909;
				line-height: 65rpx;
			}

			.time {
				font-weight: 400;
				font-size: 26rpx;
				color: #9398A8;
				margin-top: 28rpx;
			}
		}

		.change-outer {
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 32rpx 24rpx;
			margin: 24rpx 24rpx 0;

			.name {
				font-weight: 500;
				font-size: 36rpx;
				color: #090909;
			}

			.num {
				font-weight: 400;
				font-size: 26rpx;
				color: #9398A8;
				line-height: 37rpx;
				margin-top: 16rpx;
			}
		}

		.select-item {
			margin: 52rpx 0;

			.item-name {
				font-weight: 400;
				font-size: 32rpx;
				color: #090909;
				line-height: 46rpx;
			}
		}

	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
	}

	.talk_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.talk_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.talk_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.talk_fd0_0_c0 {
		width: 120rpx;
	}

	.talk_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}
</style>